<template>
    <!-- 面包屑 -->
     <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据分析</el-breadcrumb-item>
     </el-breadcrumb>
    <div class="container">
        <el-button type="success" @click="openAnaly">开始分析</el-button>
        <!-- 选着一个日期 -->
            <el-select  @change="changeDate" v-model="selectDate" placeholder="选择一个日期的数据分析 " style="margin-left: 10px">
                    <el-option
                    v-for="item in selectOption"
                        :key="item.rid"
                        :label="item.currentDate"
                        :value="item.currentDate"
                    >
                    </el-option>
            </el-select>
        <el-cascader
            style="margin-left: 10px"
            v-model="selectParmas"
            :options="options"
            :props="props"
            @change="handleChange"
        />
        <main>
            <div class="anayleEchart" ref="anayleRef"></div>
        </main>
    </div>

    <!-- 对话框 -->
    <el-dialog
    v-model="dialogVisible"
    title="选择时间段数据分析"
    width="500"
    draggable="true"
  >
  <el-time-picker
      v-model="selectTime"
      is-range
      range-separator="To"
      start-placeholder="Start time"
      end-placeholder="End time"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="renderPirture">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script lang="ts" setup>
    import tool from '../../until/tool'
    import { ref,onMounted,getCurrentInstance, reactive } from 'vue'
    import { IhttpReturn } from '../../until/interface';
    const {proxy} = getCurrentInstance()
    // 选中的参数 比如红外，紫外等
    const selectParmas = ref("")
    const props = {
         expandTrigger: 'hover' as const,
    }
    const handleChange = (value) => {
        selectParmas.value = value
    }
    // 级联选中模块到
    let options = ref([] as any)

    // 日期选着
    let selectDate = ref("")
    let selectOption = ref([])
    // 修改日期
    let changeDate = (date:any) => {
        let str:string[] = date.split("-")
        selectTime.value = [
            // @ts-ignore
            new Date(str[0],str[1] - 1,str[2]),
            // @ts-ignore
            new Date(str[0],str[1] - 1,str[2]),
        ]
    }
    onMounted(async () => {
        let {data:res}:{data:IhttpReturn} = await proxy.$adminHttp.get("/admin/getModuleNum")
        let {data:result} = await proxy.$adminHttp.get("/admin/downLoadDate")
        selectOption.value = result.data
        let num:number = res.data // 获取有多少个模块
        for(let i=1;i<=num;i++) {

            options.value.push({
                value: i,
                label: "模块" + i,
                children: [{
                    value: "uvc",
                    label: "紫外"
                },{
                    value: "inf",
                    label: "红外"
                },{
                    value: "tem",
                    label: "温度"
                },{
                    value: "hum",
                    label: "湿度"
                },{
                    value: "pre",
                    label: "压力"
                }]
            })
        }
        initEchart()

        // 响应式改变大小
        window.onresize = () => {
            setTimeout(() => {
                anayleEchart.resize()
            }, 300);
        }
    })

    /*分析对话框*/ 
    let dialogVisible = ref()
    let selectTime = ref([]) // 选择的时间段
    // 打开对话框
    let openAnaly = () => {
        if (!selectDate.value || !selectParmas.value) return proxy.notifyWarning("需要先选择日期和那个模块进行分析")
        dialogVisible.value = true
    }
    /**分析的可视化 */
    import * as echarts from 'echarts'
    import { ECharts } from "echarts"
    import {Adminanayle} from '../../until/chart'
    let anayleRef = ref()
    let anayleEchart = reactive<ECharts>({} as ECharts)
    let initEchart = () => {
        anayleEchart = echarts.init(anayleRef.value)
        anayleEchart.setOption(
            Adminanayle(['1','2','3','4','5','6'],selectParmas.value,
           [502.84, 205.97, 332.79, 281.55, 398.35, 214.02],
           [[0,502.84],[1,205.97],[2,332.79],[3,281.55],[4,398.35],[5,214.02]]
        ))
    }
    let renderPirture = async () => {
        if (!selectTime.value) return proxy.notifyWarning("请选择一个时间段进行分析")
        let startTime:string = tool.tool.getTimeStr(selectTime.value[0])
        let endTime:string = tool.tool.getTimeStr(selectTime.value[1])

        let module_id:number|string = selectParmas.value[0]
        let module_type:string = selectParmas.value[1]
       let {data:res}:{data:IhttpReturn} = await proxy.$adminHttp.get("/admin/getAnayleRecord",{
            params: {
                startTime,
                selectDate: selectDate.value,
                endTime,
                module_id,
                module_type
            }
        })
        if (res.data.length > 0) {
            // x轴的曲线
            let xData:number[] = res.data.map((item:any) => item[module_type])
            // y轴的曲线
            let yData:Array<Array<number>> = res.data.map((item:any,index:number) => [index,item[module_type]])
            let timeData:string[] = res.data.map((item:any) => item.time)    
            anayleEchart.setOption(Adminanayle(timeData,selectParmas.value,xData,yData,startTime + '-'+endTime))
            dialogVisible.value = false
        } else {
            proxy.notifyWarning("这个时间段没有数据，换一个重试!!")
        }
       
    }

    
</script>


<style scoped lang="less">
    .container {
        height: calc(100% - 100px);
        margin-top: 20px;
        main {
            margin-top: 20px;
            height: calc(100% - 60px);
            .anayleEchart  {
                height: 100%;
            }
        }
    }
</style>